import { Components } from "formiojs";
import $ from "jquery";

const HtmlComponent = (Components as any).components.field;

class SkrFormComponent extends HtmlComponent {

  constructor(component: any, options: any, data: any) {
    super(component, options, data);
  }

  static schema(...extend: any[]) {
    return HtmlComponent.schema({
      type: "SkrForm",
      label: "收款人",
      key: "skrForm"
    });
  }

  public static editForm = (...args: any) => {
    return HtmlComponent.editForm([
      {
        key: "display",
        components: [
          {
            type: "input",
            label: "收款人字段",
            key: "skrFullName",
            input: true,
            weight: 3,
            tooltip: "Check this if you would like to \"clone\" the first row of components to all additional empty rows of the table."
          }
        ]
      }, {
        key: "data",
        components: [
          {
            key: "defaultValue",
            ignore: true
          }, {
            key: "multiple",
            ignore: true
          }, {
            key: "persistent",
            ignore: true
          }, {
            key: "protected",
            ignore: true
          }, {
            key: "dbIndex",
            ignore: true
          }, {
            key: "encrypted",
            ignore: true
          }
        ]
      }
    ], ...args);
  };

  static get builderInfo() {
    return {
      title: "收款人",
      group: "advanced",
      icon: "phone-square",
      weight: 30,
      documentation: "/userguide/form-building/advanced-components#skrForm",
      schema: SkrFormComponent.schema()
    };
  }


  public render(children: any) {
    return super.render(this.renderTemplate("skrForm", this.skrFormValue));
  }

  /**
   * After the html string has been mounted into the dom, the dom element is returned here. Use refs to find specific
   * elements to attach functionality to.
   *
   * @param element
   * @returns {Promise}
   */
  attach(element: any) {
    // Allow basic component functionality to attach like field logic and tooltips.
    this.loadRefs(element, {
      skrTable: 'single',
    });
    return super.attach(element);
  }

  /**
   * Get the value of the component from the dom elements.
   *
   * @returns {Array}
   */
  getValue() {
    debugger
    return {
      skrFullName: this.refs['skrFullName'].textContent
    };
  }

  /**
   * Set the value of the component into the dom elements.
   *
   * @param value
   * @returns {boolean}
   */
  setValue(value: any,flags = {}) {
   if (value) {
     console.log(value,flags);
     let tbl = this.refs['skrTable'];
     $(tbl).find('td[ref=skrFullName]').text(value['skrFullName']);
     $(tbl).find('td[ref=skrKhyh]').text(value['skrKhyh']);
     $(tbl).find('td[ref=skrYhzh]').text(value['skrYhzh']);
     $(tbl).find('td[ref=skrContacter]').text(value['skrContacter']);
     $(tbl).find('td[ref=skrPhone]').text(value['skrPhone']);
   }
  }
}

export default {
  SkrForm: SkrFormComponent
};
